import React from 'react';
import { Flex } from '@/components/flex';
import * as UI from './ui';
import type { Customer } from './types';
import * as hooks from './hooks';
import { PageController } from './page-controller';

export default function CustomerDetail() {
    return (
        <Body />
    );
}


function Body() {

    const pageController = React.useMemo(() => new PageController(), []);
    const { id } = hooks.useSearch();

    React.useEffect(() => {
        pageController.setId(id);
        pageController.queryCustomerDetail();
        pageController.queryCustomerStoredValueCards();
    }, [id, pageController]);

    // 模拟客户详情数据
    const [customer] = React.useState<Customer>({
        id: id || '1',
        name: '张小美',
        phone: '138****1234',
        gender: '女',
        age: 28,
        joinDate: '2023-06-15',
        serviceCount: 12,
        totalAmount: 2680,
        memberCard: {
            type: '会员会员',
            number: 'VIP001234',
            balance: 680,
            points: 120
        },
        packages: [
            {
                name: '深层护理套餐',
                used: 5,
                total: 10,
                startDate: '2023-12-01',
                endDate: '2024-12-01',
                cost: 1800
            },
            {
                name: '头皮按摩+精油护理',
                used: 2,
                total: 8,
                startDate: '2023-11-15',
                endDate: '2024-11-15',
                cost: 960
            }
        ],
        serviceRecords: [
            {
                id: '1',
                type: '深层滋养护理',
                date: '2024-01-15',
                rating: 5,
                cost: 280,
                duration: 60,
                note: '客户感觉护理效果好，头皮明显有改善'
            },
            {
                id: '2',
                type: '头皮按摩+精油护理',
                date: '2024-01-08',
                rating: 4,
                cost: 180,
                duration: 60,
                note: '客户反馈手法舒服，会推荐下次继续使用这种精油'
            },
            {
                id: '3',
                type: '洗剪吹套餐',
                date: '2023-12-28',
                rating: 5,
                cost: 120,
                duration: 45,
                note: '新发型很适合客户，客户非常满意'
            }
        ],
        preferences: '偏爱温和物脂护理，对营养成分款敏感'
    });

    return (
        <PageController.Context.Provider value={pageController}>
            <Flex vertical style={{ backgroundColor: '#f5f5f5', height: '100vh' }}>
                <UI.Header />
                <Flex vertical style={{ padding: '16px', overflow: 'auto', flex: 1, width: "100%", alignItems: 'normal' }}>
                    <UI.BasicInfo />
                    <UI.ScalpInfo />
                    <UI.PackagesCard />
                    <UI.Order />
                    <UI.ServiceRecords customer={customer} />
                </Flex>
            </Flex>
        </PageController.Context.Provider>
    )
}